import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Image,
  ImageBackground,
} from 'react-native';
import {List} from '@ant-design/react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
import BaseUrl from '../../config/BaseUrl';
import {courseDetail, courseCataList} from '../../service/home';
import {orderSelect} from '../../service/common';
import OrderPrdList from '../../components/OrderPrdList';
import SearchHeadIcon from '../../components/SearchHeadIcon';

import Countdown from '../../utils/countdown';
import Score from '../../utils/Score';

const Item = List.Item;

const tabs = [
  {name: '课程介绍', id: 0},
  {name: '课程目录', id: 1},
  // {name: '课程回看', id: 2},
];

const CouseDetail = (props) => {
  const {
    route: {
      params: {courseId},
    },
  } = props;

  const navigation = useNavigation();
  const [currentId, setCurrentId] = useState(0);
  const [courseData, setCourseData] = useState({});
  const [courseList, setCourseList] = useState([]);
  const [courseTime, setCourseTime] = useState({});
  useEffect(() => {
    navigation.setOptions({
      title: '课程详情',
      // headerRight: () => (
      //   <TouchableOpacity>
      //     <Image
      //       style={styles.filter_icon_container}
      //       source={require('../../assets/images/star.png')}
      //     />
      //   </TouchableOpacity>
      // ),
    });

    courseDetail(courseId).then((res) => {
      setInterval(() => {
        setCourseTime(Countdown(res?.data?.freeEndTime));
      }, 500);

      res.data.level_list = Score(res?.data?.teacherLevel) || [];
      console.log(res.data, 123123);
      setCourseData(res.data);
    });

    courseCataList(courseId).then((res) => {
      console.log(res);
      setCourseList(res.data);
    });
  }, [navigation]);

  return (
    <AreaView>
      <ScrollView style={styles.container}>
        <Image
          style={styles.banner}
          source={{uri: BaseUrl.imgurl + courseData.courseImage}}
        />
        <View style={styles.title}>
          <Text style={styles.title_text} numberOfLines={2}>
            {courseData.courseIntr}
          </Text>
          {/* <View style={styles.start_time}>
            <Text style={styles.time_text}>3月27日 20:36开课</Text>
          </View> */}
        </View>
        {courseData.freeCourse === 'Y' ? (
          <ImageBackground
            style={styles.tag}
            source={require('../../assets/images/couse_tag.png')}>
            <View style={styles.tag_title}>
              <Text style={styles.tag_title_text}>限时免费</Text>
            </View>
            {courseData.freeEndTime ? (
              <View style={styles.remain}>
                <Text style={styles.remain_title}>距活动结束还剩</Text>
                <View style={styles.remain_time}>
                  <Text style={styles.remain_unit}>
                    {courseTime.dayDiff ? `${courseTime.dayDiff}` : 0}天
                  </Text>
                  <View style={styles.time_num}>
                    <Text style={styles.time_num_text}>
                      {courseTime.hours ? `${courseTime.hours}` : 0}
                    </Text>
                  </View>
                  <Text style={styles.remain_unit}>时</Text>
                  <View style={styles.time_num}>
                    <Text style={styles.time_num_text}>
                      {courseTime.minutes ? `${courseTime.minutes}` : 0}
                    </Text>
                  </View>
                  <Text style={styles.remain_unit}>分</Text>
                  <View style={styles.time_num}>
                    <Text style={styles.time_num_text}>
                      {courseTime.seconds ? `${courseTime.seconds}` : 0}
                    </Text>
                  </View>
                  <Text style={styles.remain_unit}>秒</Text>
                </View>
              </View>
            ) : null}
          </ImageBackground>
        ) : null}
        <View style={styles.money_time_rule}>
          <View style={styles.money_box}>
            <Text style={styles.money_unit}>￥</Text>
            <Text style={styles.money_text}>{courseData.freeCourse === 'Y' ? 0 :courseData.coursePrice}</Text>
            <Text style={styles.del_money}>￥{courseData.coursePrice}</Text>
          </View>
          <Text style={styles.rule_text}>活动规则描述</Text>
          <View style={styles.list_box}>
            {/* <View style={styles.list}>
              <View style={styles.line} />
              <Text style={styles.list_title}>开课日期：</Text>
              <Text style={styles.list_info}>2021-3-27 20：54</Text>
            </View> */}
            <View style={styles.list}>
              <View style={styles.line} />
              <Text style={styles.list_title}>课长时数：</Text>
              <Text style={styles.list_info}>
                共计{courseData.courseNum}课时
              </Text>
            </View>
            <View style={styles.list}>
              <View style={styles.line} />
              <Text style={styles.list_title}>课长时长：</Text>
              <Text style={styles.list_info}>{courseData.courseHours}小时</Text>
            </View>
            {/* <View style={styles.list}>
              <View style={styles.line} />
              <Text style={styles.list_title}>购买规则：</Text>
              <Text style={styles.list_info}>活动课程不支持退换课程</Text>
            </View> */}
          </View>
        </View>
        <View style={styles.teacher_container}>
          <Image
            style={styles.cover}
            source={{uri: BaseUrl.imgurl + courseData.teacherImage}}
          />
          <View style={styles.teacher_desc}>
            <Text style={styles.name}>{courseData.teacherNam}</Text>
            <View style={styles.star_list}>
              {courseData.level_list
                ? (courseData.level_list || []).map((item, index) => {
                    return <Image style={styles.star} source={item} key={index} />;
                  })
                : null}
            </View>
            <Text style={styles.teacher_info} numberOfLines={2}>
              <Text style={styles.teacher_title}>简介：</Text>
              {courseData?.teacherDesc?.replace(/<\/?.+?\/?>/g, '')}
            </Text>
          </View>
        </View>
        <View style={styles.desc_container}>
          <View style={styles.tabs_container}>
            {(tabs || []).map((item) => (
              <TouchableOpacity
                key={item.id}
                onPress={() => setCurrentId(item.id)}
                style={styles.tab_btn}>
                <Text
                  style={[
                    styles.btn_text,
                    currentId === item.id && styles.btn_text_selected,
                  ]}>
                  {item.name}
                </Text>
                {currentId === item.id && <View style={styles.selected} />}
              </TouchableOpacity>
            ))}
          </View>
          {currentId === 0 && (
            <View style={styles.couse_desc}>
              <Text style={styles.list_detail}>
                {courseData.courseDesc?.replace(/<\/?.+?\/?>/g, '')}
              </Text>
            </View>
          )}
          {currentId === 1 && (
            <View style={styles.couse_list}>
              {(courseList || []).map((item, index) => (
                <View style={styles.list_text}>
                  <Text style={styles.list_detail}>{item.ctlTitle}</Text>
                </View>
              ))}
            </View>
            // <View style={styles.list_text}>
            //   <Text style={styles.list_num}>第一节</Text>
            //   <Text style={styles.list_detail}>课程标题课程标题课程标题</Text>
            // </View>
          )}
        </View>
      </ScrollView>
      <View style={styles.footer}>
        <Text style={styles.foot_money}>
          <Text style={styles.foot_money_text}>¥</Text>
          <Text>{courseData.freeCourse === 'Y' ? "0" : courseData.coursePrice}</Text>
        </Text>
        <View style={styles.foot_btn_right}>
          {/* <TouchableOpacity  activeOpacity={1} onPress={() => navigation.push('ShopCar')}>
            <Image
              style={styles.foot_car}
              source={require('../../assets/images/shopcar.png')}
            />
          </TouchableOpacity> */}
          {/* <TouchableOpacity
            onPress={() => navigation.push('PaySure')}
            style={styles.foot_btn}>
            <Text style={styles.foot_btn_text}>加入购物车</Text>
          </TouchableOpacity> */}
          <TouchableOpacity
            onPress={() => {
              // orderSelect(courseId).then(res => {
              //   console.log(res);
              // })
              navigation.push('PaySure', {courseId});
            }}
            style={styles.foot_btn}>
            <Text style={styles.foot_btn_text}>立即购买</Text>
          </TouchableOpacity>
        </View>
      </View>
    </AreaView>
  );
};

export default CouseDetail;
